<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: HeAo
 * @LastEditTime: 2021-11-26 17:49:52
-->
<template>
  <div class="home">
    <!-- 头部区域 -->
    <div class="header">
      <div class="Topp">
        <img
          src="../assets/T2AUO){Z{CPMMPFIMMOO9RV.png"
          alt="图片丢失"
          width="1200px"
          height="150px"
        />
      </div>
      <div class="containor">
        <div class="name">怀化学院教务网</div>
        <ul class="category">
          <li
            v-for="(category, index) in categories"
            :key="index"
            @click="cardClickHander(category.id)"
          >
            {{ category.name }}
          </li>
        </ul>

        <div class="telephone">
          <img
            src="../assets/email.png"
            alt="图片丢失"
            width="30px"
            height="30px"
          />
          <span>电子邮箱</span>
        </div>
      </div>
    </div>
    <!-- 轮播图区域 -->
    <div class="swipper">
      <el-carousel height="500px">
        <el-carousel-item v-for="(item, index) in carousel" :key="index">
          <img :src="item.url" alt="图片丢失" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 新闻简介部分 -->
      <div class="new">
        <span class="jiangli">
          <img
            src="../assets/jiangli.png"
            alt="无法找到图片"
            height="400px"
            width="550px"
          />
        </span>
        <span class="news">
          <div class="newsheader">学校新闻</div>
          <div class="newsword">
            <ul>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1877.htm"
                  target="_blank"
                  >拿奖拿到手软！我校学子在第七届“东方财富杯”全国大学...</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1875.htm"
                  target="_blank"
                  >学校举办2021年实验室安全文化活动</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1874.htm"
                  target="_blank"
                  >我校驻俄联络员钟磊博士应邀访问俄罗斯联邦伊曼努尔·康...</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1870.htm"
                  target="_blank"
                  >我校举行2021年辅导员职业能力提升专题培训会
                </a>
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1867.htm"
                  target="_blank"
                  >中国共产党湖南省第十二次代表大会隆重开幕
                </a>
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1843.htm"
                  target="_blank"
                  >湖南日报：在继承和发扬斗争精神中昂首阔步新征程</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1843.htm"
                  target="_blank"
                  >三个一等奖！我校学子在全国大学生数学竞赛湖南赛区获佳...</a
                >
              </li>
            </ul>
          </div>
        </span>
      </div>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <div class="new2">
        <span class="xueshu">
          <div class="title3">学术预告</div>
          <div class="content3">
            <ul>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1877.htm"
                  target="_blank"
                  >湖南农业大学卢向阳教授将来我校讲学</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1875.htm"
                  target="_blank"
                  >湖南中医药大学李顺祥教授将来我校讲学</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1874.htm"
                  target="_blank"
                  >中南大学罗志勇教授将来我校讲学</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1870.htm"
                  target="_blank"
                  >南华大学曹毅教授将来我校讲学
                </a>
              </li>
            </ul>
          </div>
        </span>
        <span class="tongzhi">
          <div class="title2">通知公告</div>
          <div class="content2">
            <ul>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1877.htm"
                  target="_blank"
                  >2020-2021学年度国家励志奖学金获得者名单公示</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1875.htm"
                  target="_blank"
                  >怀化学院2020-2021年度信息公开工作报告</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1874.htm"
                  target="_blank"
                  >怀化学院2020-2021学年国家奖学金、校级奖学金（三好...</a
                >
              </li>
              <li>
                <a
                  href="http://rsc.hhtc.edu.cn/info/1021/1870.htm"
                  target="_blank"
                  >关于推荐参加2021年省级一流本科课程认定评选结果的公...
                </a>
              </li>
            </ul>
          </div>
        </span>
      </div>
      <el-divider></el-divider>
      <!--底部图片-->
      <div class="pictru">
        <img src="../assets/bottom (2).png" alt="无法找到图片" />
      </div>
    </div>
    <!--底部-->
    <div class="bottom_bg">
      <div class="bottom_a">
        <u1 class="list f1">
          <li><a>湖南教育政务网</a></li>
          <li><a>湖南政务服务网</a></li>
          <div class="clear"></div>
        </u1>
        <div>
          <div class="wer">
            <img src="../assets/blue.png" class="blue" />
          </div>
          <div class="hhxytp">
            <img src="../assets/bslogo.png" />
          </div>
        </div>
        <div class="dibu">
          <img src="../assets/bo.png" class="lianxi" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入请求工具
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      categories: [],
      carousel: [],
      projects: [],
    };
  },
  methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    // 查询所有轮播图
    findAllCarousel() {
      get("/index/carousel/findAll").then((res) => {
        // 将后台响应的轮播图数据，设置到组件的数据模型中
        this.carousel = res.data;
      });
    },
    // 游学项目卡片点击事件
    cardClickHander(id) {
      // 点击项目卡片，跳转至目标页面
      // 通过query属性携带参数，参数会以查询字符串的形式，拼接到url地址栏后面
      console.log(id);
      if (id == 3) this.$router.push({ path: "/Apply" });
      if (id == 4) this.$router.push({ path: "/ApplyQuery" });
      if (id == 9) this.$router.push({ path: "/news" });
      if (id == 5) this.$router.push({ path: "/article" });
      if (id == 6) this.$router.push({ path: "/apply" });
      if (id == 8) this.$router.push({ path: "/article" });
    },
  },
  // vue组件的生命周期钩子函数
  created() {
    // 调用查询所有栏目信息的方法
    this.findAllCategories();
    // 调用查询所有轮播图的方法
    this.findAllCarousel();
    // 调用查询所有项目信息的方法
  },
};
</script>

<style scoped>
.header {
  /* display: flex; */
  height: 238px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgb(255, 255, 255);
}
.containor {
  background-color: rgb(38, 43, 110);
  width: 100%;
  height: 85px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  margin-left: 3%;
  float: left;
  font-size: 25px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 85px;
  font-size: 20px;
  color: rgb(255, 255, 255);
}
.eleCardTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  margin-right: 3%;
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 25px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 8px;
  margin-right: 10px;
}
.content {
  padding: 0 50px;
}
.new {
  margin-left: 10%;
  display: flex;
}
.jiangli {
  margin-top: 15px;
}
.news {
  margin-left: 30px;
  float: left;
  background-color: rgba(228, 228, 228, 0.425);
  width: 650px;
  padding-bottom: 30px;
  font-size: 20px;
  height: 400px;
}
.newsheader {
  padding-top: 30px;
  text-align: center;
  padding-bottom: 10px;
  font-size: 30px;
  color: rgb(44, 51, 151);
}
.newsword {
  margin-left: 15px;
  line-height: 45px;
  cursor: pointer;
}
.title2 {
  padding-top: 30px;
  text-align: center;
  padding-bottom: 10px;
  font-size: 30px;
  color: rgb(44, 51, 151);
}
.title3 {
  padding-top: 30px;
  text-align: center;
  padding-bottom: 10px;
  font-size: 30px;
  color: rgb(44, 51, 151);
}
.content3 {
  margin-left: 30px;
  line-height: 60px;
  cursor: pointer;
}
.content2 {
  margin-left: 30px;
  line-height: 60px;
  cursor: pointer;
}
.xueshu {
  float: left;
  background-color: rgba(228, 228, 228, 0.425);
  width: 550px;
  padding-bottom: 40px;
  margin-left: 20px;
  font-size: 20px;
  height: 320px;
}

.tongzhi {
  margin-left: 30px;
  float: left;
  background-color: rgba(228, 228, 228, 0.425);
  width: 650px;
  padding-bottom: 30px;
  font-size: 20px;
  height: 330px;
}
.new2 {
  margin-left: 9%;
  display: flex;
  width: 1800px;
}
.pictru {
  margin-left: 4%;
  cursor: pointer;
}
.clear {
  clear: both;
}
.list li {
  width: 12%;
  float: left;
  height: 15px;
  line-height: 12px;
}
.list li a {
  font-size: 15px;
  color: rgb(251, 253, 255);
  margin-left: 50px;
}
.hhxytp {
  border: none;
  vertical-align: top;
  text-align: center;
}
.bottom_bg {
  background: #939cd0;
  height: 230px;
  background-size: cover;
  padding: 24px 0;
}
.blue {
  border: none;
  padding: 0.1px 1px 1px 1350px;
}
.lianxi {
  padding: 1px 220px;
  height: 80px;
  width: 1050px;
}
* {
  list-style: none;
}
</style>

